<template>
  <div :class="{'correct': isCorrect, 'wrong': isWrong, 'testing': !isCorrect && !isWrong}">
    <h1>拼写小测验</h1>

    <ul class="word-list">
      <li class="word-item  no-bullets">
          <span class="first-column">
          <label for="word-list-file-quiz" class="custom-file-button">
            <FontAwesomeIcon icon="folder" />选择单词表
          </label></span>
        <span class="second-column">
          <input type="file" id="word-list-file-quiz" @change="handleFileChange"  style="display: none;"/>
          </span>
      </li>
      <li class="word-item no-bullets">
        <span class="first-column">单词表: </span>
        <span class="second-column">{{ currentWordListFileName }}</span>
      </li>

      <li class="word-item  no-bullets">
        <span class="first-column">数量: </span>
        <span class="second-column">{{ wordCount }}</span>
      </li>
      <li class="word-item  no-bullets">
        <span class="first-column">单词: </span>
        <span class="second-column">{{ displayedWord }}</span>
      </li>

      <li class="word-item  no-bullets">
        <span class="first-column"  id="meaning">词义: </span>
        <span class="second-column">{{ currentMeaning }}</span>
      </li>
      <li class="word-item  no-bullets">
        <span class="first-column"><input v-model="userAnswer" type="text" placeholder="在这里输入你的答案" /></span>
        <span class="second-column">
          <button @click="checkAnswer">确认</button>
          <button @click="nextWord">下一个</button></span>
      </li>
    </ul>

    <audio ref="correctSound" :src="'/correct.mp3'" preload="auto"></audio>
    <audio ref="wrongSound" :src="'/wrong.mp3'" preload="auto"></audio>
  </div>



</template>

<script>
import { ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';
import { parseCsv } from "../store/utils"; // 引入 parseCsv 函数

export default {
  name: 'QuizView',
  setup() {
    const store = useStore();

    // 从 Vuex store 中获取当前单词表和文件名
    const currentWordList = computed(() => store.getters['wordList/getCurrentWordList']);
    const currentWordListFileName = computed(() => store.getters['wordList/getCurrentWordListFileName']);

    // 统计单词数量
    const wordCount = computed(() => currentWordList.value.length);

    // 处理文件选择事件
    const handleFileChange = (event) => {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const text = e.target.result;
          const wordList = parseCsv(text);
          store.dispatch('wordList/changeWordList', { fileName: file.name, wordList });
          pickWord(); // 重新选择一个单词
        };
        reader.readAsText(file);
      }
    };

    // 单词拼写测验相关状态
    const correctSound = ref(null);
    const wrongSound = ref(null);

    const currentWord = ref('');
    const currentMeaning = ref('');
    const displayedWord = ref('');
    const userAnswer = ref('');
    const isCorrect = ref(false);
    const isWrong = ref(false);

    const pickWord = () => {
      if (currentWordList.value.length > 0) {
        const index = Math.floor(Math.random() * currentWordList.value.length);
        const { word, chineseDefinition } = currentWordList.value[index];
        currentWord.value = word;
        if(!chineseDefinition){
          const word_ = currentWordList.find(w => w.word === word);
          if(word_){
            currentMeaning.value = word_.chineseDefinitions;
          }

        } else
          currentMeaning.value = chineseDefinition;
        displayedWord.value = scrambleWord(word);
        isCorrect.value = false; // 重置正确状态
        isWrong.value = false; // 重置错误状态
      }


    };

    const scrambleWord = (word) => {
      // 简化版：只隐藏一半字母
      return word.split('').map((char, index) => index % 2 === 0 ? '_' : char).join('');
    };

    const checkAnswer = () => {
      if (userAnswer.value === currentWord.value) {
        isCorrect.value = true;
        isWrong.value = false;
        playSound('correct');
      } else {
        isCorrect.value = false;
        isWrong.value = true;
        playSound('wrong');
      }
      userAnswer.value = ''; // 清空输入框
      pickWord(); // 选择下一个单词
    };


    const nextWord = () => {

      userAnswer.value = ''; // 清空输入框
      pickWord(); // 选择下一个单词
    };

    const playSound = (type) => {
      const audio = type === 'correct' ? correctSound.value : wrongSound.value;
      if (audio) {
        audio.play();
      }
    };

    // 组件挂载时加载默认单词表并选择第一个单词
    onMounted(() => {
      store.dispatch('wordList/loadDefaultWordList');
      pickWord();
    });

    return {
      currentWord,
      currentMeaning,
      displayedWord,
      userAnswer,
      isCorrect,
      isWrong,
      pickWord,
      checkAnswer,
      nextWord,
      correctSound,
      wrongSound,
      currentWordList,
      currentWordListFileName,
      wordCount,
      handleFileChange
    };
  },

};
</script>


<style scoped>
@import './styles.css';
</style>